<template>
	<view class="com-page y-flex" :style="rootStyle">
		<view class="com-page-wrapper y-flex y-flex-1 position-relative" ref="page" :animation="animationData">
			<slot></slot>
			<slot name="safe-bottom">
				<com-safe-bottom></com-safe-bottom>
			</slot>
			<view class="position-absolute-cover y-flex" :style="{
				'background-color': bgColor
			}" v-if="loading">
				<view class="com-page-loading y-flex y-align-center">
					<slot name="loading"></slot>
					<com-loading class="mt-20" size="45" :color="loadingColor"></com-loading>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			duration: {
				type: Number,
				default: 500
			},
			//允许页面滚动,仅vue页面有效
			allowScroll: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: ''
			},
			loadingColor: {
				type: String,
				default: ''
			},
			loading: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				top: 0,
				animationData: []
			}
		},
		computed: {
			rootStyle () {
				// #ifdef APP-NVUE
				return {
					'background-color': this.bgColor
				}
				// #endif
				// #ifndef APP-NVUE
				return this.allowScroll ? {
					'min-height': `calc(100vh - ${this.top}px)`,
					'overflow': 'visible',
					'background-color': this.bgColor
				} : {
					height: `calc(100vh - ${this.top}px)`,
					'background-color': this.bgColor
				}
				// #endif
			}
		},
		created() {
			// #ifndef APP-NVUE
			this.top = uni.getSystemInfoSync().windowTop
			// #endif
		},
		mounted() {
			this.$nextTick(function () {
				// #ifndef APP-NVUE
				const animation = uni.createAnimation({
					duration: this.duration,
					timingFunction: "ease",
					delay: 0
				})
				animation.opacity(1).step()
				this.animationData = animation.export()
				// #endif
				// #ifdef APP-NVUE
				uni.requireNativePlugin('animation').transition(this.$refs.page, {
				    styles: {
						opacity: 1
				    },
				    duration: this.duration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				});
				// #endif
			})
		}
	}
</script>

<style>
	.com-page {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}
	.com-page-wrapper {
		opacity: 0;
	}
	.com-page-loading {
		margin-top: 100px;
	}
</style>